<template>
  <div v-if="oc">
    <div class="offer-bar">
      <div class="offer-bar-box">
        <span>订单：</span>
        <el-select class="offer-bar-select" size="medium" :value="offerId" @change="offerCallback" filterable>
          <el-option v-for="(item,index) in offerList" :key="index" :label="item.name + ' (' + item.id + ')'"
                     :value="item.id"></el-option>
        </el-select>
      </div>
      <div class="offer-bar-btn" @click="viewOfferInfo">
        订单详情
      </div>
    </div>

    <offer-edit :title="offerInfo.title"
                :offerStatus="offerInfo.status"
                :dialogVisible="offerInfo.visible"
                :dataList="offerInfo.data"
                :confirm-to-share="offerInfo.confirmToShare"
                @close-dialog="closeOfferDialog">
    </offer-edit>
  </div>
</template>

<script>
import {mapGetters, mapState} from "vuex";
import {getEventMgr} from "@/util/events";
import {getOfferList} from "@/api/business/share";
import {getDetail} from "@/api/business/offer";
import offerEdit from "@/views/business/components/offerEdit"

export default {
  name: "offerBar",
  components: {
    offerEdit
  },
  data() {
    return {
      offerList: [],//offer列表
      offerInfo: {
        visible: false,
        title: '',
        status: '',
        data: null,
        confirmToShare: 0,
      },
    };
  },

  created() {
    this.getOfferDic();
  },
  mounted() {
  },
  computed: {
    ...mapState({
      oc: state => state.user.oc,
      offerId: state => state.user.offer
    }),
    ...mapGetters([
      "userInfo",
    ])
  },
  methods: {
    setCurrentOfferName() {
      this.offerList.forEach((item) => {
        if (item.id == this.offerId) {
          console.log("offer name:" + item.name)
          this.$store.commit('SET_OFFER_NAME', item.name);
        }
      })
    },
    getOfferDic() {
      getOfferList(this.userInfo.user_id).then(res => {
        this.offerList = res.data.data
        this.setCurrentOfferName()
      })
    },
    offerCallback(val) {
      this.$store.commit('SET_OFFER', val);
      this.setCurrentOfferName()
      getEventMgr('offerCenter').sendEvent({message: 'offerChanged', offerId: this.offerId});
    },
    viewOfferInfo() {
      let self = this;
      if (this.offerId != null && this.offerId !== '') {
        self.offerInfo.title = 'check';
        self.offerInfo.open = true;
        self.offerInfo.visible = true;
        self.offerInfo.confirmToShare = 1;
        getDetail(this.offerId).then(res => {
          self.offerInfo.data = res.data.data;
        });
      }
    },
    closeOfferDialog() {
      this.offerInfo.visible = false;
    },
  }
}
</script>

<style lang="scss" scoped>
.offer-bar {
  display: flex;
  margin-left: 20px;
  align-items:center;
  font-size:16px;
  height:100%;
}

.offer-bar-box {
  display:flex;
  align-items:center;
  width:400px;
  height:30px;
  font-size:16px;
  border-radius: 50px;
  padding: 2px 20px;
  background-color: #63b8fc;
  color: #fff;
}
.offer-bar-select {
  width: 100%;
}

.offer-bar-btn {
  display: flex;
  align-items:center;
  margin-left:12px;
  font-size:16px;
  height:30px;
  padding: 2px 15px;
  border-radius: 53px;
  background-color: #63b8fc;
  cursor:pointer;
  color: #fff;
  &:hover {
    background-color: #397eb4;
  }
}

/deep/ .el-input__inner {
  color: #fff;
  background: transparent;
  border: none;
  font-size: 16px;
}

/deep/ .el-input__suffix {
  color: #fff;
}

/deep/ .el-select .el-input .el-select__caret {
  color: #fff;
}

/deep/ input::-webkit-input-placeholder {
  color: #fff;
}
/deep/ input::-moz-placeholder {
  color: #fff;
}
</style>
